<template>
  <div>
    <div class="top_item">
      <div>
        <img src="../../assets/images/jiankong.png" alt="" />
        <div>{{ name }}</div>
      </div>
          <div>
      <img src="../../assets/images/xiaofanglei.png" alt="" />
      <div>消防类</div>
    </div>
    <div>
      <img src="../../assets/images/qitalei.png" alt="" />
      <div>其他类</div>
    </div>
    </div>

  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { getshebei } from '../../request'
const name = ref()
onMounted(() => {
  getshebei().then((res) => {
    console.log(res)
    name.value=res.data.data[0].name
  })
})
</script>

<style>
.top_item {
  font-size: 16px;
  margin-top: 10px;
  width: 100%;
  height: 200px;
  background: #0c1d5f;
  display: flex;
  align-items: center;
  /* 水平分布，每个元素之间间隔相等 */
  justify-content: space-around;
  text-align: center;
  color: #fff;
}
.top_item >div img {
  width: 100px;
  height: 100px;
}

</style>
